<template>
  <div class="dianyihuo">
	  <h2>跟着视频学VueJS
	  	<a href="https://www.bilibili.com/video/BV1UJ411c7Qe?p=4" >基于vue-cli3的Vue系列教程</a>
	  </h2>
	  <div @click="parentClick">ParentNode
		  <div @click="childClick1">ChildNode1</div>
		  <!-- 阻止冒泡事件 -->
		  <div @click.stop="childClick2">ChildNode2</div>
		  <!-- 阻止右键默认事件 -->
		  <div @click.right.prevent="rightClick">Right Click</div>	
	  </div>
	  <button v-bind:disabled="isBtnDisabled">我是按钮</button>

	  
	  
	  
	  <!--  
	  <div>Day1：v-on事件绑定</div>
	  <div>{{ number }}</div>
	  <button v-on:click="plus"> 按钮单击 ++ </button>	  
	  <button @click="minus"> 按钮单击 -- </button>
	  <button @click="star(3, $event)"> 按钮单击 ** </button>
	  <hr />
	  <div>Day1: v-on事件切换</div>
	  <div v-if="isShow">isShow = {{ isShow }}</div>
	  <div v-else>isShow = {{ isShow }}</div>
	  <button @click="transfer">转变</button>

	  <hr />

	  <div v-if="isShow">isShow=true的时候才显示</div>
	  <div v-else-if="isHiden">isHiden=true的时候才显示</div>
	  <div v-else>都不满足才显示</div>
	  <template v-if="isShown">template 标签不会渲染到Dom中
		  <div>第一行</div>
		  <div>第二行</div>
	  </template>
	  <hr />
	  <div>Day1 = v-for使用</div>
	  <ul id="loop">
		  <li v-for="item in arr1">item={{ item * 2 }}</li>
		  <li v-for="(item, idx) of arr2">{{idx}} : {{item}}</li>
		  <li :style="{textAlign:'left'}" v-for="(value, key, index) in obj" :key="key">{{index}} - {{key}}:{{value}}</li>
	  </ul>
	  -->
  </div>
</template>

<script type="text/javascript">
export default {
	name: "Demo",
	data () {
		return {
			isShow: true,
			isHiden: true,
			isShown: true,
			arr1: [1,2,3,4,5],
			arr2: ['a','b','c','d','e'],
			obj:{
				name: "张三",
				sex: "男",
				age: 20
			},
			number: 1,
			isBtnDisabled: false
		}
	},
	// 钩子函数
	mounted () {
		setTimeout(() => {
			this.isShow = false
		}, 3000),
		setTimeout(() => {
			this.isHiden = false
		}, 4000)
	},
	methods: {
		plus (event) {
			console.log(event);
			this.number += 1;
		},
		minus (event) {
			this.number -= 1;
		},
		star (val, event) {
			console.log(event)
			if (typeof val === 'number'){
				this.number *= val;
			}else {
				this.number --;
			}	
		},
		transfer () {
			this.isShow = !this.isShow 
		},
		parentClick() {
			console.log('Parent Click')
		},
		childClick1() {
			console.log('Child 1 Click')
		},
		childClick2() {
			console.log('Child 2 Click')
		},
		rightClick() {
			console.log('Right Click')
		}
	}
}
</script>

<style type="text/css">
#loop li {
	list-style: none;
}
</style>